<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body {
            background-color: aliceblue;
        }

        .register {
            width: 800px;
            height: 500px;
            background-color: white;
            margin: 0 auto;
            border-radius: 15px;
            display: flex;
            justify-content: left;
        }

        .register .title {
            font-size: 20px;
            color: #adadad;
            box-sizing: border-box;
            padding-top: 30px;
            padding-left: 20px;
            /* background-color: aqua; */
        }

        .register .info {
            box-sizing: border-box;
            padding-top: 100px;
            width: 400px;
            margin-left: 80px;
            /* background-color: bisque; */
        }

        input {
            outline: none;
            border: none;
        }

        .info .item {
            width: 300px;
            height: 25px;
            border: 1px solid #adadad;
            /* background-color: #adadad; */
        }
        .msg{
            display: block;
            color: red;
            font-size: 12px;
            height: 25px;
        }
        .item i {
            display: inline-block;
            width: 20px;
        }

        .agree {
            margin-left: 30px;
        }

        .code{
            display: inline-block;
            width: 104px;
            text-align: end;
        }
        .info a {
            text-decoration: none;
            color: #53c79b;
            font-size: 14px;
        }
        input[type=code]{
            width: 140px;
        }
        .info .next .btn {
            height: 35px;
            width: 300px;
            border: none;
            color: white;
            margin-top: 20px;
            background-color: #53c79b;
        }
    </style>
</head>

<body>
    <div class="register">
        <div class="title">新用户注册</div>
        <form class="info">
            <div class="item">
                <i></i>
                <input type="username" placeholder="请输入用户名">
            </div>
            <span class="uname-msg msg"></span>
            <div class="item">
                <i></i>
                <input type="tel" placeholder="请输入手机号">
            </div>
            <span class="tel-msg msg"></span>
            <div class="item">
                <i></i>
                <input type="code" placeholder="获取验证码">
                <span class="code"><a href="javascript:;">获取验证码</a></span>
            </div>
            <span class="code-msg msg"></span>
            <div class="item">
                <i></i>
                <input type="password" placeholder="设置密码">
            </div>
            <span class="psd-msg msg"></span>
            <div class="item">
                <i></i>
                <input type="password" placeholder="再次输入密码" class="psd2">
            </div>
            <span class="psd2-msg msg"></span>
            <div class="agree">
                <input type="checkbox">
                <span>已阅读并同意<a href="">《用户服务协议》</a></span>
            </div>
            <div class="next">
                <button class="btn">下一步</button>
            </div>
        </form>
    </div>
    <script>
        // 发送短信验证码模块
        const code = document.querySelector('.code a')
        let flag = true
        // 点击事件
        code.addEventListener('click', function () {
            if (flag) {
                // 倒计时未结束点击不执行
                flag=false
                let i = 5
                // 点击后立即触发
                code.innerHTML = `0${i}秒后重新获取`
                // 开启定时器
                const timerId = setInterval(function () {
                    i--
                    code.innerHTML = `0${i}秒后重新获取`
                    // 倒计时结束，关闭定时器
                    if (i === 0) {
                        clearInterval(timerId)
                        // 重新获取
                        code.innerHTML = '重新获取'
                        // 打开点击事件
                        flag=true
                    }
                }, 1000)
            }

        })
        // 验证用户名
        const uname=document.querySelector('[type=username]')
        uname.addEventListener('change',verifyName)
        function verifyName(){
            const span=document.querySelector('.uname-msg')
            const flag= /^[a-zA-Z0-9-_]{6,10}$/.test(uname.value)
            if(!flag){
                span.innerHTML='输入不合法，请输入6-10位'
                return false
            }
            span.innerHTML=''
            return true
        }
        // 验证手机号
        const tel=document.querySelector('[type=tel]')
        tel.addEventListener('change',verifyTel)
        function verifyTel(){
            const span=document.querySelector('.tel-msg')
            const flag= /^1\d{10}$/.test(tel.value)
            if(!flag){
                span.innerHTML='输入不合法，请输入正确的11位手机号'
                return false
            }
            span.innerHTML=''
            return true
        }
        // 验证码验证
        const codeInput=document.querySelector('[type=code]')
        codeInput.addEventListener('change',verifyCode)
        function verifyCode(){
            const span=document.querySelector('.code-msg')
            const flag= /^\d{6}$/.test(codeInput.value)
            if(!flag){
                span.innerHTML='输入不合法，请输入6位验证码'
                return false
            }
            span.innerHTML=''
            return true
        }
        // 验证密码
        const psd=document.querySelector('[type=password]')
        psd.addEventListener('change',verifyPsd)
        function verifyPsd(){
            const span=document.querySelector('.psd-msg')
            const flag= /^\w{6,16}$/.test(psd.value)
            if(!flag){
                span.innerHTML='输入不合法，6-16位数字字母组成'
                return false
            }
            span.innerHTML=''
            return true
        }
        // 验证两次密码输入是否一致
        const psd2=document.querySelector('.psd2')
        psd2.addEventListener('change',verifyPsd2)
        function verifyPsd2(){
            const span=document.querySelector('.psd2-msg')
            if(psd.value!==psd2.value){
                span.innerHTML='两次密码输入不一致'
                return false
            }
            span.innerHTML=''
            return true
        }
        // 提交表单
        const btn=document.querySelector('.next .btn')
        btn.addEventListener('click',function(e){
            const input =document.querySelector('.agree input')
            if(!input.checked){
                e.preventDefault()
                alert('请勾选同意协议')
            }
            if(!verifyName()) e.preventDefault()
            if(!verifyTel()) e.preventDefault()
            if(!verifyCode()) e.preventDefault()
            if(!verifyPsd()) e.preventDefault()
            if(!verifyPsd2()) e.preventDefault()
        })
    </script>
</body>

</html>